<template>
  <div id="home">
    <Navbar>
      <h4 class="title" slot="center">购物街</h4>
    </Navbar>
      <Swiper>
        <Swiper-Item v-for="item in banners" :key="item.acm">
          <a :href="item.link">
            <img :src="item.image" alt="swiper-item" />
          </a>
        </Swiper-Item>
      </Swiper>
      <Recommend :recommends="recommends" />
      <Weekly />
      <TabControl
        :titles="['流行', '新款', '精选']"
        @tabClick="tabClick"
      />
      <GoodsList :goods="goods[currentType].list" />
  </div>
</template>

<script>
import Recommend from "./childcpn/recommend";
import Weekly from "./childcpn/weekly";

import Navbar from "@/components/navbar";
import { Swiper, SwiperItem } from "@/components/swiper";
import TabControl from "@/components/tab-control/tab-control";
import GoodsList from "@/components/goods/goods-list";

import { getHomeMultidata, getHomeGoods } from "@/services/home";

export default {
  name: "",
  components: {
    Navbar,
    Swiper,
    SwiperItem,
    TabControl,
    Recommend,
    Weekly,
    GoodsList
  },
  data() {
    return {
      banners: [],
      recommends: [],
      goods: {
        pop: { page: 0, list: [] },
        new: { page: 0, list: [] },
        sell: { page: 0, list: [] },
      },
      currentType: "pop"
    };
  },
  created() {
    this.getHomeMultidata(),
      // 请求商品列表数据
      this.getHomeGoods("pop"),
      this.getHomeGoods("new"),
      this.getHomeGoods("sell");
  },
  methods: {
    /*
     ** 网络请求
     */
    getHomeMultidata() {
      getHomeMultidata().then((res) => {
        this.banners = res.data.banner.list;
        this.recommends = res.data.recommend.list;
      });
    },
    getHomeGoods(type) {
      const page = this.goods[type].page + 1;
      getHomeGoods(type, page).then((res) => {
        this.goods[type].list.push(...res.data.list);
        this.goods[type].page += 1;
      });
    },
    /*
     ** 事件监听
     */
    tabClick(index) {
      switch (index) {
        case 0:
          this.currentType = "pop";
          break;
        case 1:
          this.currentType = "new";
          break;
        case 2:
          this.currentType = "sell";
          break;
      }
    }
  },
};
</script>
<style scoped>
.title {
  color: #fff;
}

.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  background-color: #39a9ed;
}
</style>